﻿<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
	<title>设置</title>
	<link rel="stylesheet" href="css/common.css" />
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link href="css/fonts/font_6yxmrwgmg7kl0udi.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="./css/settings.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript">
		var w, h, className;
		function getSrceenWH() {
			w = $(window).width();
			h = $(window).height();
			$('#dialogBg').width(w).height(h);
		}

		window.onresize = function () {
			getSrceenWH();
		}
		$(window).resize();

		$(function () {
			getSrceenWH();

			//显示弹框
			$('.box a').click(function () {
				className = $(this).attr('class');
				$('#dialogBg').fadeIn(300);
				$('#dialog').removeAttr('class').addClass('animated ' + className + '').fadeIn();
			});

			//关闭弹窗
			$('.claseDialogBtn').click(function () {
				$('#dialogBg').fadeOut(300, function () {
					$('#dialog').addClass('bounceOutUp').fadeOut();
				});
			});
		});
	</script>
</head>

<body>
	<!--top-->
	<div class="top_c">
		<a href="#" class="iconfont icon-jiantou-copy-copy"></a>
		<p class="titi" style="padding-right: 50px;">
			设置
		</p>
	</div>
	<!--列表-->
	<div class="lie_b" style="margin-top: 3.5em;padding:0;">
		<div class="container box">
			<div class="one demo">
				<a href="#" id="ni" class="bounceInDown">
					<p class="biao">
						<span class="iconfont"></span>昵称<i class="iconfont icon-jiantou"></i>
						<c style="float:right;margin-right:10%;">{{data.username}}</c>
					</p>
				</a>
			</div>
			<div class="one" style="border-bottom:none;">
				<a href="XXX.html">
					<p class="biao">
						<span class="iconfont"></span>收货地址<i class="iconfont icon-jiantou"></i>
						<c style="float:right;margin-right:10%;">未设置</c>
					</p>
				</a>
			</div>
		</div>
	</div>
	<div class="lie_b">
		<div class="container">
			<div class="one">
				<a href="XXX.html">
					<p class="biao">
						<span class="iconfont"></span>绑定手机号<i class="iconfont icon-jiantou"></i>
						<c style="float:right;margin-right:10%;">已绑定</c>
					</p>
				</a>
			</div>
			<div class="one">
				<a href="XXX.html">
					<p class="biao">
						<span class="iconfont"></span>绑定邮箱<i class="iconfont icon-jiantou"></i>
						<c style="float:right;margin-right:10%;">已绑定</c>
					</p>
				</a>
			</div>
			<div class="one" style="border-bottom:none;">
				<a href="#" onclick="editPassword()">
					<p class="biao">
						<span class="iconfont"></span>修改密码<i class="iconfont icon-jiantou"></i>
					</p>
				</a>
			</div>
		</div>
	</div>
	<div class="lie_b">
		<div class="container">
			<div class="one" style="border-bottom:none;">
				<a href="/member">
					<p class="biao tui" style="text-align: center;">
						<span>退出登录</span>
					</p>
				</a>
			</div>
		</div>
	</div>
	<div class="modal fade" id="updatePassword" tabindex="-1">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="exampleModalLabel">密码修改</h4>
				</div>
				<div class="modal-body">
					<form name="editForm">
						<div class="form-group">
							<label for="recipient-name">原密码：</label>
							<input type='password' id="oldpassword" class="form-control" name="oldpassword" required
								placeholder="原密码">
							<div style="display: inline" id="tip1"></div>
						</div>
						<div class="form-group">
							<label for="message-text">新密码:</label>
							<input type='password' id="password1" name="password1" class="form-control" required
								placeholder="长度为: 6-18">
							<div style="display: inline" id="tip2"></div>
						</div>
						<div class="form-group">
							<label for="message-text">再次输入:</label>
							<input type='password' id="password2" name="password2" class="form-control" required
								placeholder="必须和第一次一样">
							<div style="display: inline" id="tip3"></div>
						</div>
				</div>
				<div class="modal-footer">
					<button onclick="submitPassword()" class="btn btn-primary"
						ng-disabled="editForm.$invalid">确定</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				</div>
				</form>
			</div>
		</div>
	</div>
	<div class="box">
		<div id="dialogBg"></div>
		<div id="dialog" class="animated">
			<img class="dialogIco" width="50" height="50" src="images/ico.png" alt="" />
			<div class="dialogTop">
				<a href="javascript:;" class="claseDialogBtn">关闭</a>
			</div>
			<form action="" method="post" id="editForm">
				<ul class="editInfos">
					<li><label>
							<font color="#ff0000">* </font>昵称：<input type="text" name="" required value=""
								class="ipt" />
						</label></li>
					<li><input type="submit" value="确认提交" class="submitBtn" /></li>
				</ul>
			</form>
		</div>
	</div>
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.cookie.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script>
		$('.tui').click(function (e) {
			$.removeCookie('user')
			$.removeCookie('phone')
		})
		if (!$.cookie('user')) {
			alert('请先登录')
			location.href = '/member'
		}
		$('.icon-jiantou-copy-copy').click(function (e) {
			history.go(-1)
		})
		$('#ni').click(function (e) {
			$('.ipt').val($.cookie('user'))
			$('.submitBtn').click(function (e) {
				var se = $('.ipt').val()
				$.get('/upData', { se }, data => {
					if (data) {
						alert(data)
						location.reload()
					}
				})
			})

		})
		var editPassword = function () {
			$("#password1").blur(function () {
				var num = $("#password1").val().length;
				if (num < 6) {
					$("#tip2").html("<font color=\"red\" size=\"2\">  太短了</font>");
				}
				else if (num > 18) {
					$("#tip2").html("<font color=\"red\" size=\"2\">  太长了</font>");
				}
				else {
					$("#tip2").html("<font color=\"green\" size=\"2\"> OK</font>");
				}
			});

			$("#password2").blur(function () {
				var tmp = $("#password1").val();
				var num = $("#password2").val().length;
				if ($("#password2").val() != tmp) {
					$("#tip3").html("<font color=\"red\" size=\"2\">  和第一次输入不同</font>");
				}
				else {
					if (num >= 6 && num <= 18) {
						$("#tip3").html("<font color=\"green\" size=\"2\">  OK</font>");
					}
					else {
						$("#tip3").html("<font color=\"red\" size=\"2\">  太短或太长</font>");
					}
				}
			});
			$("#updatePassword").modal();
			$(".btn-primary").click(function (e) {
				if ($("#password1").val() == $("#password2").val()) {
					var obj = {
						oldpassword: $('#oldpassword').val(),
						newpassword: $("#password2").val()
					}
					$.get('/uppassword', obj, data => {
						alert(data)
						location.reload()

					})
				}

			})
		}

	</script>
</body>

</html>